<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogFormVisible"
    width="700px"
    @close="close"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-input v-model="form.id" type="hidden"></el-input>
      <el-form-item label="产品名称" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="所属品类" prop="beytype">
        <el-select v-model="form.beytype" placeholder="请选择">
          <el-option
            v-for="item in productseries"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="节点类型" prop="nodetype">
        <el-radio-group v-model="form.nodetype">
          <el-radio label="1" model-value="nodetype">直连</el-radio>
          <el-radio label="2" model-value="nodetype">网关子设备</el-radio>
          <el-radio label="3" model-value="nodetype">网关设备</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="联网方式" prop="linktype">
        <el-radio-group v-model="form.linktype">
          <el-radio label="1" model-value="linktype">蜂窝</el-radio>
          <el-radio label="2" model-value="linktype">以太网</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="接入网关协议" prop="gateprotocol">
        <el-select v-model="form.gateprotocol" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="数据格式" prop="datafmt">
        <el-radio-group v-model="form.datafmt">
          <el-radio label="1" model-value="datafmt">JSON</el-radio>
          <el-radio label="2" model-value="datafmt">透传/自定义</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="数据校验" prop="dataverfy">
        <el-radio-group v-model="form.dataverfy">
          <el-radio label="0" model-value="dataverfy">无校验</el-radio>
          <el-radio label="1" model-value="dataverfy">弱校验</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="认证方式" prop="authtype">
        <el-radio-group v-model="form.authtype">
          <el-radio label="1" model-value="authtype">设备密钥</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="产品描述" prop="descpt">
        <el-input v-model="form.descpt"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { saveProduct, getProductSeries } from '@/api/Product'

  export default {
    name: 'RoleManagementEdit1',
    data() {
      return {
        options: [
          {
            value: 'selfdefine',
            label: '自定义',
          },
          {
            value: 'modbus',
            label: 'Modbus',
          },
          {
            value: 'opcua',
            label: 'OPC UA',
          },
          {
            value: 'zigbee',
            label: 'ZigBee',
          },
          {
            value: 'ble',
            label: 'BLE',
          },
        ],
        form: {
          name: '',
          id: '',
          beytype: '',
          nodetype: '1',
          linktype: '1',
          datafmt: '1',
          dataverfy: '0',
          datafmt: '1',
          authtype: '1',
          gateprotocol: '',
        },
        rules: {
          name: [
            { required: 1, message: '请输入产品名称', trigger: 'blur' },
            {
              min: 1,
              max: 30,
              message: '长度在 1 到 30 个字符',
              trigger: 'blur',
            },
          ],
          beytype: [
            { required: 1, message: '请选择所属品类', trigger: 'blur' },
            {
              min: 1,
              max: 32,
              message: '长度在 1 到 30 个字符',
              trigger: 'blur',
            },
          ],
        },
        title: '',
        dialogFormVisible: false,
        productseries: '',
      }
    },
    created() {},
    methods: {
      showEdit(row) {
        console.log(row)
        if (!row) {
          this.title = '添加'
        } else {
          this.title = '编辑'
          this.form = Object.assign({}, row)
        }
        this.dialogFormVisible = true
        this.fetchData()
      },
      close() {
        this.$refs['form'].resetFields()
        this.form = this.$options.data().form
        this.dialogFormVisible = false
      },
      save() {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            const { msg } = await saveProduct(this.form)
            this.$baseMessage(msg, 'success')
            this.$emit('fetch-data')
            this.close()
          } else {
            return false
          }
        })
      },
      async fetchData() {
        this.listLoading = true
        const { data } = await getProductSeries({})
        this.productseries = data
        setTimeout(() => {
          this.listLoading = false
        }, 300)
      },
    },
  }
</script>
